Lint: fix CSS syntax and some antipatterns (#39685)

Author: Josh-Cena

files/en-us/learn_web_development/core/accessibility/wai-aria_basics/index.md

@@ -270,7 +270,7 @@ footer {
 }
 
 nav {
-  background-color: ff80ff;
+  background-color: #ff80ff;
   display: flex;
   gap: 2vw;
   @media (width <= 650px) {
@@ -523,7 +523,7 @@ footer {
 }
 
 nav {
-  background-color: ff80ff;
+  background-color: #ff80ff;
   display: flex;
   gap: 2vw;
   @media (width <= 650px) {

files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md

@@ -374,7 +374,6 @@ body {
   text-align: center;
 }
 .visually-hidden {
-  clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px;
   overflow: hidden;

files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md

@@ -522,7 +522,6 @@ body {
   height: 1px;
   width: 1px;
   overflow: hidden;
-  clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
 }
@@ -608,7 +607,7 @@ body {
 }
 .filters {
   width: 100%;
-  margin: unset auto;
+  margin: unset;
 }
 /* Todo item styles */
 .todo {

files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md

@@ -225,7 +225,6 @@ Update your `App.vue` file's `<style>` element so it looks like so:
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px 1px 1px 1px);
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: rect(1px, 1px, 1px, 1px);
     white-space: nowrap;
@@ -351,7 +350,6 @@ Next, copy the following CSS into the newly created `<style>` element:
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
-  font-size: 16px;
   font-size: 1rem;
   line-height: 1.25;
   color: #0b0c0c;
@@ -363,12 +361,10 @@ Next, copy the following CSS into the newly created `<style>` element:
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
-  font-size: 16px;
   font-size: 1rem;
   line-height: 1.25;
   box-sizing: border-box;
   width: 100%;
-  height: 40px;
   height: 2.5rem;
   margin-top: 0;
   padding: 5px;
@@ -453,7 +449,6 @@ Next, copy the following CSS into the newly created `<style>` element:
   label,
   input,
   .custom-checkbox {
-    font-size: 19px;
     font-size: 1.9rem;
     line-height: 1.31579;
   }

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md

@@ -71,7 +71,6 @@ This is the first example of code that explains [how to build a custom form widg
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -207,7 +206,6 @@ This is the first example of code that explains [how to build a custom form widg
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -343,7 +341,6 @@ This is the first example of code that explains [how to build a custom form widg
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md

@@ -89,7 +89,6 @@ This is the second example that explain [how to build custom form widgets](/en-U
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md

@@ -89,7 +89,6 @@ This is the third example that explain [how to build custom form widgets](/en-US
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md

@@ -89,7 +89,6 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md

@@ -89,7 +89,6 @@ This is the last example that explain [how to build custom form widgets](/en-US/
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md

@@ -188,8 +188,6 @@ So now that we have the basic functionality in place, the fun can start. The fol
   border-radius: 0.4em;
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%);
 
-  /* The first declaration is for browsers that do not support linear gradients. */
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -331,7 +329,6 @@ So here's the result with our three states ([check out the source code here](/en
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -453,7 +450,6 @@ So here's the result with our three states ([check out the source code here](/en
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -575,7 +571,6 @@ So here's the result with our three states ([check out the source code here](/en
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -835,7 +830,6 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -1133,7 +1127,6 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -1463,7 +1456,6 @@ Check out the [source code here](/en-US/docs/Learn_web_development/Extensions/Fo
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 
@@ -1789,7 +1781,6 @@ Check out the [full source code here](/en-US/docs/Learn_web_development/Extensio
 
   box-shadow: 0 0.1em 0.2em rgb(0 0 0 / 45%); /* 0 1px 2px */
 
-  background: #f0f0f0;
   background: linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0);
 }
 

files/en-us/learn_web_development/extensions/forms/html_forms_in_legacy_browsers/index.md

@@ -72,7 +72,7 @@ The {{HTMLElement("input")}} element can make things a little difficult if you w
 <input type="button" value="click me" />
 ```
 
-If we remove the border on all inputs, can we restore the default appearance on input buttons only?
+If we remove the border on all inputs, we can restore the default appearance for input buttons only with the global CSS {{cssxref('revert')}} value.
 
 ```css
 input {
@@ -81,22 +81,11 @@ input {
   border: 1px solid #ccc;
 }
 input[type="button"] {
-  /* This does NOT restore the default rendering */
-  border: none;
-}
-input[type="button"] {
-  /* These don't either! Actually there is no standard way to do it in any browser */
-  border: auto;
-  border: initial;
-}
-input[type="button"] {
-  /* This will come the closest to restoring default rendering. */
+  /* Revert the last border declaration */
   border: revert;
 }
 ```
 
-See the global CSS {{cssxref('revert')}} value for more information.
-
 ### Let go of CSS
 
 One of the big issues with HTML Forms is styling form widgets with CSS. Form controls appearance is browser and operating system specific. For example, the input of color type looks different in Safari, Chrome and Firefox browser, but the color picker widget is the same in all browsers on a device as it opens up the operating system's native color picker.

files/en-us/web/accessibility/aria/reference/roles/switch_role/index.md

@@ -138,11 +138,10 @@ button.switch {
   border: 2px solid black;
   display: inline-block;
   margin-right: 0.25em;
-  line-height: 20px;
   vertical-align: middle;
   text-align: center;
   font:
-    12px "Open Sans",
+    12px / 20px "Open Sans",
     "Arial",
     serif;
 }

files/en-us/web/api/animation/overallprogress/index.md

@@ -50,7 +50,6 @@ html {
 }
 
 body {
-  margin: 0;
   width: 500px;
   margin: 0 auto;
   padding: 20px;

files/en-us/web/api/web_audio_api/controlling_multiple_parameters_with_constantsourcenode/index.md

@@ -63,7 +63,7 @@ The HTML content for this example is primarily a checkbox, shaped as an actual b
   content: "⏸";
 }
 
-#playButton:not(checked) + label::after {
+#playButton:not(:checked) + label::after {
   content: "▶️";
 }
 

files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/setup/index.md

@@ -130,7 +130,7 @@ p {
 }
 
 button {
-  background-color: -internal-light-dark(white, black);
+  background-color: light-dark(white, black);
   padding: 1rem 10rem;
   border-radius: 3rem;
   border: none;

files/en-us/web/css/-webkit-text-stroke/index.md

@@ -12,7 +12,6 @@ The **`-webkit-text-stroke`** [CSS](/en-US/docs/Web/CSS) property specifies the
 ```css
 /* Width and color values */
 -webkit-text-stroke: 4px navy;
-text-stroke: 4px navy;
 
 /* Global values */
 -webkit-text-stroke: inherit;

files/en-us/web/css/@supports/index.md

@@ -200,9 +200,16 @@ The `or` operator creates a new expression from the disjunction of two shorter e
 Multiple disjunctions can be juxtaposed without the need of more parentheses. The following are both equivalent:
 
 ```css
-@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+  (-webkit-transform-style: preserve) {
+}
 
-@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+@supports (transform-style: preserve-3d) or
+  (
+    (-moz-transform-style: preserve-3d) or
+      (-webkit-transform-style: preserve-3d)
+  ) {
+}
 ```
 
 > [!NOTE]

files/en-us/web/css/_colon_open/index.md

@@ -136,7 +136,6 @@ select {
   font-size: 100%;
   padding: 5px;
   border: 1px solid black;
-  background-color: white;
   background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,5 15,5 10,15'/%3E%3C/svg%3E")
     no-repeat right 3px center / 1em 1em;
 }

files/en-us/web/css/_colon_read-only/index.md

@@ -133,7 +133,6 @@ textarea {
   display: block;
   font-family: inherit;
   font-size: 100%;
-  padding: 0;
   margin: 0;
   box-sizing: border-box;
   padding: 5px;

files/en-us/web/css/css_colors/applying_color/index.md

@@ -169,7 +169,7 @@ The `.boxLeft` class, used to style the box on the left, sets up the color of th
   background-color: hwb(270deg 63% 13%);
   outline: 4px dashed #6e1478;
   color: hsl(0deg 100% 100%);
-  text-decoration: underline;
+  text-decoration-line: underline;
   text-decoration-style: wavy;
   text-decoration-color: #8f8;
   text-decoration: underline wavy #8f8;

files/en-us/web/css/css_conditional_rules/using_feature_queries/index.md

@@ -207,7 +207,7 @@ For example, the `selector()` function can be used to import a stylesheet for br
 
 ```css
 /* A `selector()` query within a `supports()` function */
-@import `/css/webkitShadowStyles.css`
+@import "/css/webkitShadowStyles.css"
   supports(selector(::-webkit-inner-spin-button));
 ```
 

files/en-us/web/css/css_containment/container_size_and_style_queries/index.md

@@ -200,7 +200,7 @@ The behavior of registered custom properties is different. When explicitly defin
 ```css
 @property --theme-color {
   initial-value: rebeccapurple;
-  inherited: true;
+  inherits: true;
 }
 
 :root {

files/en-us/web/css/css_fonts/variable_fonts_guide/index.md

@@ -402,7 +402,7 @@ In the following live example, you can adjust the slant.
 ```css hidden live-sample___slant-example
 @font-face {
   font-family: "SlantFont";
-  font-style: oblique -15 15;
+  font-style: oblique -15deg 15deg;
   src: url("https://mdn.github.io/shared-assets/fonts/font_with_slant_axis.woff2")
     format("woff2");
 }